<template>
  <div class="order-meal">
    <singleHeader pageName="点餐"></singleHeader>
    <div class="page-head">
      <div class="shop-address">
        <div class="shop-info">
          <div class="details">
            <div class="shop-name">
              {{ store.name || "汉堡王(洛阳泉舜财富中心店..." }}
            </div>
            <div class="shop-local">
              <img src="" />
              <span>{{ store.address || "宝龙城市广场B座" }}</span>
            </div>
          </div>
          <img class="shop-img" :src="logoImg || defaultImg" mode="" />
        </div>
        <div class="seat-info">桌号 · 2</div>
      </div>
      <div class="head-blue-bg"></div>
    </div>
    <div class="swiper-section">
      <div class="swiper-box">
        <a-carousel :autoplay="true">
          <div
            class="swiper-item"
            v-for="(item, index) in bannerList"
            :key="index"
          >
            <img :src="item.pic_url" alt="" />
          </div>
        </a-carousel>
      </div>
    </div>
    <div class="order-section" :class="styleType == 2 ? 'layout-column' : ''">
      <div class="left-nav-list">
        <div class="nav-list">
          <div
            class="nav-item"
            :class="[
              activeNav == index ? 'active-nav' : '',
              activeNav == index - 1 ? 'active-top' : '',
              activeNav == index + 1 ? 'active-down' : '',
            ]"
            @click="activeNav = index"
            v-for="(item, index) in listData"
            :key="index"
          >
            <span>{{ item.title }}</span>
            <span
              v-if="styleType == 2"
              class="active-line"
              :class="activeNav == index ? 'show-line' : ''"
            ></span>
          </div>
        </div>
      </div>
      <div class="goods-list">
        <div class="goods-group">
          <goodsDefault
            v-if="goodsType == 1"
            :propsData="propsData"
            :goodsList="listData[activeNav].list"
          ></goodsDefault>
          <goodsFlexTwo
            v-if="goodsType == 2"
            :propsData="propsData"
            :goodsList="listData[activeNav].list"
          ></goodsFlexTwo>
          <goodsColumn
            v-if="goodsType == 3"
            :propsData="propsData"
            :goodsList="listData[activeNav].list"
          ></goodsColumn>
          <goodsFlexGroup
            v-if="goodsType == 4"
            :propsData="propsData"
            :goodsList="listData[activeNav].list"
          ></goodsFlexGroup>
          <!-- <div
            class="good-item"
            v-for="(item, index) in listData[activeNav].list"
            :key="index"
          >
            <img class="goods-pic" :src="item.goods_pic" alt="" />
            <div class="goods-info">
              <div class="title">{{ item.name }}</div>
              <div class="subtitle">{{ item.desc }}</div>
              <div class="sales">{{ item.sales }}</div>
              <div class="price-group">
                <div class="price-box">
                  <div class="price">
                    <span>￥</span>
                    <span>{{ item.price }}</span>
                  </div>
                  <div class="origin-price">￥{{ item.original_price }}</div>
                </div>
                <div class="good-to-add">
                  <i class="iconfont icon-jiahao"></i>
                </div>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="foot-btn">
      <div class="page-foot">
        <div class="choose-info">
          <div class="price">
            <span>￥</span>
            <span>0</span>
          </div>
          <div class="num">已选0份</div>
        </div>
        <div class="foot-submit-btn">加一个商品</div>
      </div>
    </div>
  </div>
</template>

<script>
import singleHeader from "../../components/singleHeader/index.vue";
import defaultImg from "@/assets/images/diy/default_img.png";
import goodsDefault from "./components/default.vue";
import goodsColumn from "./components/column.vue";
import goodsFlexGroup from "./components/flexGroup.vue";
import goodsFlexTwo from "./components/flexTwo.vue";
// diy接口
import {
  getOrderMealBanners,
  getOrderMealStore,
  getOrderMealListData,
} from "@/api/diy/diy";

export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  mixins: [],
  components: {
    singleHeader,
    goodsColumn,
    goodsDefault,
    goodsFlexTwo,
    goodsFlexGroup,
  },
  data() {
    return {
      navList: ["超级实惠", "精选主食", "今天吃鸡", "缤纷小食", "下午茶 "],
      activeNav: 0,
      goodsList: [
        {
          goods_pic:
            "http://tianxin100we10.cyyvip.com/web/uploads/images/store_1/2021-05-19/246ce67033d91bffd7c65019659b1943c10ccb93.jpeg",
          name: "测试商品111",
          id: "119",
          title: "王道嫩香鸡块",
          subtitle: "5粒装王道嫩香鸡块，金黄…",
          sales: "月售 158",
          price: "5.9",
          original_price: "12.5",
        },
        {
          goods_pic:
            "http://tianxin100we10.cyyvip.com/web/uploads/images/store_1/2021-05-19/246ce67033d91bffd7c65019659b1943c10ccb93.jpeg",
          name: "测试商品111",
          id: "119",
          title: "王道嫩香鸡块",
          subtitle: "5粒装王道嫩香鸡块，金黄…",
          sales: "月售 158",
          price: "5.9",
          original_price: "12.5",
        },
      ],
      storeInfo: {},
      bannerList: [],
      logoImg: "",
      defaultImg,
      store: {},
      listData: [],
    };
  },
  mounted() {
    this.getListData();
    this.getBanners();
    this.getOrderMealStore();
    this.$eventHub.$on("reloadOrderMealBanner", () => {
      this.getBanners();
    });
    this.$eventHub.$on("reloadOrderMealLogo", () => {
      this.getOrderMealStore();
    });
  },
  watch: {},
  computed: {
    styleType() {
      return this.propsData.params.styleType;
    },
    storeImg() {
      return this.storeInfo.logo || defaultImg;
    },
    goodsType() {
      return this.propsData.params.goodsType || "3";
    },
  },
  methods: {
    getListData() {
      getOrderMealListData().then((res) => {
        if (!res.code) {
          this.listData = res.data;
        }
      });
    },
    getBanners() {
      getOrderMealBanners({ url: "/plugins/food/banner/list" }).then((res) => {
        if (!res.code) {
          this.bannerList = res.data.data;
        }
      });
    },
    getOrderMealStore() {
      getOrderMealStore().then((res) => {
        if (!res.code) {
          this.logoImg = res.data.logo;
          this.store = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.order-meal {
  width: 100%;
  min-height: 617px;
  background: #ffffff;
  .page-head {
    width: 100%;
    position: relative;

    .shop-address {
      width: 351px;
      height: 93px;
      background: #ffffff;
      box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.02);
      border-radius: 8px;
      position: absolute;
      left: 12px;
      top: 23px;
      z-index: 11;
      padding: 12px 12px 0 12px;

      .shop-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .details {
          flex: 1;
          .shop-name {
            max-width: 267px;
            font-size: 20px;
            font-weight: 600;
            color: #191919;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 26.25px;
          }
          .shop-local {
            display: flex;
            align-items: center;
            font-size: 12px;
            font-weight: 400;
            color: #191919;
            margin-top: 4px;
            img {
              width: 10px;
              height: 12px;
              display: block;
              margin-right: 2px;
              background-size: 100%;
            }
            span {
              display: block;
              max-width: 251px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }
        .shop-img {
          width: 48px;
          height: 48px;
          background-size: 100% 100%;
          border: 1px solid rgba(112, 112, 112, 0.2);
          border-radius: 8px;
          margin-left: 12px;
        }
      }
      .seat-info {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        margin-top: 4px;
      }
    }
    .head-blue-bg {
      width: 100%;
      height: 77px;
      background: #1677ff;
    }
  }

  .swiper-section {
    width: 100%;
    padding-top: 48px;
    .swiper-box {
      background: #c79393;
      width: 351px;
      margin: 0 auto;
      height: 89px;
      border-radius: 8px;
      .swiper-item {
        width: 351px;
        height: 89px;
        border-radius: 8px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }
  }

  .order-section {
    width: 100%;
    // min-height: 410px;
    min-height: 360px;
    display: flex;
    align-items: flex-start;
    position: relative;
    .left-nav-list {
      width: 80px;
      height: 100%;
      background: #f2f2f2;
      border-radius: 0px 0px 8px 0px;
      position: absolute;
      left: 0;
      top: 0;

      .nav-list {
        background-color: #ffffff;
      }
      .nav-item {
        width: 100%;
        height: 53px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        background-color: #f2f2f2;
        span {
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 400;
          line-height: 16px;
          color: #666666;
        }
      }
      .active-nav {
        background-color: #ffffff;
        span {
          font-weight: 600;
          color: #191919;
        }
      }
      .active-top {
        border-radius: 0 8px 0 0;
      }
      .active-down {
        border-radius: 0 0 8px 0;
      }
    }
    .goods-list {
      width: 295px;
      height: 100%;
      background-color: #ffffff;
      padding-top: 12px;
      margin-left: 80px;
      // overflow-y: scroll;
      // overflow-x: hidden;
      // padding-bottom: 50px;
      .goods-group {
        width: 100%;
        .good-item {
          width: 100%;
          padding: 12px;
          display: flex;
          align-items: flex-start;
          .goods-pic {
            width: 96px;
            height: 96px;
            background: #ffffff;
            border: 1px solid rgba(112, 112, 112, 0.10196078431372549);
            border-radius: 4px;
            margin-right: 11px;
          }
          .goods-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            .title {
              font-size: 15px;
              font-family: PingFang SC;
              font-weight: 600;
              line-height: 16px;
              color: #191919;
            }
            .subtitle {
              font-size: 12px;
              font-family: PingFang SC;
              font-weight: 400;
              line-height: 16px;
              color: #999999;
              margin-top: 4px;
            }
            .sales {
              font-size: 12px;
              font-family: PingFang SC;
              font-weight: 400;
              line-height: 16px;
              color: #999999;
              margin-top: 4px;
            }
            .price-group {
              display: flex;
              justify-content: space-between;
              align-items: flex-end;
              .good-to-add {
                width: 22px;
                height: 22px;
                background: #1fb6fd;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                top: 5px;
                .iconfont {
                  font-size: 17px;
                  color: #ffffff;
                }
              }
              .price-box {
                display: flex;
                align-items: flex-end;
                margin-top: 18px;
                .price {
                  display: flex;
                  align-items: flex-end;
                  font-size: 16px;
                  font-family: PingFang SC;
                  font-weight: 600;
                  line-height: 14px;
                  color: #fd4b32;
                  span:nth-child(1) {
                    font-size: 11px;
                    line-height: 13px;
                  }
                }
                .origin-price {
                  font-size: 11px;
                  font-family: PingFang SC;
                  font-weight: 400;
                  line-height: 10px;
                  color: #999999;
                  text-decoration: line-through;
                }
              }
            }
          }
        }
      }
    }
    .goods-list::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }

  .layout-column {
    flex-direction: column;
    .left-nav-list {
      width: 100%;
      height: initial;
      background: inherit;
      position: relative;
      .nav-list {
        width: 100%;
        display: flex;
        align-items: center;
        .nav-item {
          background-color: #ffffff;
          flex-direction: column;
          .active-line {
            width: 26px;
            height: 2px;
            background: #fa2c1b;
            margin-top: 4px;
            opacity: 0;
          }
          .show-line {
            opacity: 1;
          }
        }
      }
    }
    .goods-list {
      width: 100%;
      margin-left: 0;
      .goods-info {
        width: 100%;
      }
    }
  }
  .foot-btn {
    width: 100%;
    height: 49px;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1001;
    .page-foot {
      width: 100%;
      height: 100%;
      background: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 12px 0 25px;

      .choose-info {
        flex: 1;
        .price {
          font-size: 18px;
          font-weight: 600;
          line-height: 16px;
          color: #191919;
          span:first-child {
            font-size: 12px;
          }
        }
        .num {
          font-size: 11px;
          font-weight: 400;
          line-height: 16px;
          color: #191919;
        }
      }

      .foot-submit-btn {
        width: 110px;
        height: 40px;
        background: #999999;
        border-radius: 30px;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        font-weight: 600;
        color: #ffffff;
      }
    }
  }
}
</style>
